<template>
	<div class="header ">
		<!-- 折叠按钮 -->
		<div class="collapse-btn" @click="collapseChage">
			<el-icon v-if="sidebar.collapse">
				<Expand />
			</el-icon>
			<el-icon v-else>
				<Fold />
			</el-icon>
		</div>
		<div class="logo">华行通后台管理系统</div>
		<div class="header-right">
			<div class="header-user-con">
				<div class="button-box">
					<!-- <el-button @click="passwordDialog">修改密码</el-button> -->
					<el-button @click="loginout">退出</el-button>
				</div>
			</div>
		</div>

		<!-- 修改密码dialog -->
		<el-dialog v-model="passwordDialogVisible" title="修改密码" center="true" modal="true" width="450px">
			<el-form :model="changePassword" :rules="rules" ref="ruleFormRef" label-width="70" label-position="right">
				<el-form-item label="旧密码" prop="oldPwd">
					<el-input v-model="changePassword.oldPwd" autocomplete="off" />
				</el-form-item>
				<el-form-item label="新密码" prop="newPwd">
					<el-input v-model="changePassword.newPwd" autocomplete="off" />
				</el-form-item>
				<!-- <el-form-item label="确认密码" prop="confirmPwd">
					<el-input v-model="changePassword.confirmPwd" autocomplete="off" />
				</el-form-item> -->
			</el-form>
			<template #footer>
				<el-button type="primary" color="#ea5b24" @click="formSubmit(ruleFormRef)">保存</el-button>
			</template>
		</el-dialog>
	</div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { ElMessage, ElMessageBox, FormInstance, FormRules } from "element-plus";
import { editPwdEmployeeApi } from '../api/index';
import { useSidebarStore } from '../store/sidebar';
import { usePermissStore } from "../store/permiss";
import { useRouter } from 'vue-router';
const sidebar = useSidebarStore();
const pinia = usePermissStore();

// const ruleConfirmPwd = (rule, value, callback) => {
// 	if (value != changePassword.newPwd) {
// 		callback(new Error('确认密码与新密码不同'));
// 	}
// }

//表单校验
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules>({
	oldPwd: [
		{ required: true, message: "请输入旧密码", trigger: 'blur' },
		{ pattern: /^[a-zA-Z0-9]+$/, message: "密码只能由数字与字母组合,不包含特殊字符", trigger: 'blur' },
		// { pattern: /(?=.*\d)(?=.*[a-zA-Z])/, message: "旧密码必须由数字与字母组合,不包含特殊字符", trigger: 'blur' },
		{ min: 6, max: 10, message: "密码只允许为6~10位", trigger: 'blur' },
	],
	newPwd: [
		{ required: true, message: "请输入新密码", trigger: 'blur' },
		{ pattern: /^[a-zA-Z0-9]+$/, message: "密码只能由数字与字母组合,不包含特殊字符", trigger: 'blur' },
		// { pattern: /(?=.*\d)(?=.*[a-zA-Z])/, message: "新密码必须由数字与字母组合,不包含特殊字符", trigger: 'blur' },
		{ min: 6, max: 10, message: "密码只允许为6~10位", trigger: 'blur' },
	],
	// confirmPwd: [{ validator: ruleConfirmPwd, trigger: 'blur' }],
})



// 修改密码dialog控制
const passwordDialogVisible = ref(false);
// 修改密码
const changePassword = reactive({
	id: null,
	newPwd: null,
	oldPwd: null,
	// confirmPwd: null,
	roleIds: null,
});

// 打开修改密码dialog
const passwordDialog = () => {
	Object.keys(changePassword).forEach((key) => (changePassword[key] = null));
	passwordDialogVisible.value = true;
	pinia.getCurUserInfo();
};

// 保存密码
const formSubmit = (formEl) => {
	if (!formEl) return
	formEl.validate(valid => {
		if (valid) {
			if (pinia.userInfo) {
				changePassword.id = pinia.userInfo.id;
				changePassword.roleIds = pinia.userInfo.roleIds;
			}
			editPwdEmployeeApi(changePassword).then((res) => {
				if (res.data.code === 2000) {
					ElMessage({
						message: "修改成功.",
						type: "success",
					});
					passwordDialogVisible.value = false;
				} else {
					switch (res.data.code) {
						case 5007:
							ElMessage.error("旧密码错误.");
							break;
						default:
							ElMessage.error("修改失败.");
							break;
					}
				}
			});
		} else {
			return false
		}
	})
};

// 侧边栏折叠
const collapseChage = () => {
	sidebar.handleCollapse();
};

onMounted(() => {
	if (document.body.clientWidth < 1500) {
		collapseChage();
	}
});

// 用户名下拉菜单选择事件
const router = useRouter();
const loginout = () => {
	localStorage.removeItem('X-Access-Token');
	router.push('/login');
}

</script>
<style lang="less" scoped>
.header {
	position: relative;
	box-sizing: border-box;
	height: 70px;
	font-size: 22px;
	/* color: #000000; */
	position: absolute;
	left: 250px;
	right: 0px;
	transition: left .3s ease-in-out;
	/* background: #FFFFFF; */

}

.collapse-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	float: left;
	padding: 0 32px;
	cursor: pointer;
}

.header .logo {
	float: left;
	width: 250px;
	line-height: 70px;
}

.header-right {
	float: right;
	padding-right: 22px;
}

.header-user-con {
	display: flex;
	height: 70px;
	align-items: center;
}

.button-box .el-button {
	background: #CBCBCB;
	color: #000000;
	font-weight: 400;
	font-size: 13px;
}
</style>
